<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Title</title>
    <script>
        $(document).ready(function () {
            var questions = []
            let No = undefined
            let type = undefined
            let must = undefined
            {% for item in question_list %}
                No = {{ item.no }}
                type = "{{ item.type }}"
                must = "{{ item.must }}"
                if (type == '') {
                    type = "unknown"
                }
                console.log(type)
                questions.push({
                    'no': No,
                    'must': must,
                    'type': type,
                })
            {% endfor %}
            console.log(questions)

            $('#commit').click(function () {
                console.log("commit option click.")
                for (let i = 0; i < questions.length; i++) {
                    let item = questions[i]
                    if (item.must != '') {
                        let create_name = 'id:' + item.no + '&'
                        if (item.type == 'radio' || item.type == 'check') {
                            let elements = document.getElementsByName(create_name)
                            let check_test = false
                            for (let j = 0; j < elements.length; j++) {
                                let option = elements[j]
                                if (option.checked) {
                                    check_test = true
                                    break
                                }
                            }
                            if (!check_test) {
                                window.alert("第" + (i + 1) + "项为必选，请选择!")
                                return
                            }
                        } else if (item.type == 'input') {
                            let elements = document.getElementsByName(create_name)[0]
                            if(elements.value == ''){
                                window.alert("第" + (i + 1) + "项为必填，请填写!")
                                return
                            }
                        }
                    }
                }
                
                $('#form1').submit()
            })
        });


    </script>
</head>
<body>
<div class="container mt-3">
    <form id="form1" method="post">
        {% for item in question_list %}
            {% csrf_token %}
            <div class="card bg-light text-dark mt-3">
                <div class="card-head mt-2 ps-2 pt-2">
                    {{ item.no |pprint | add:':' | add:item.question_text }}
                    {% if item.must != '' %}
                        ({{ item.must }})
                    {% endif %}
                </div>
                <div class="card-body ps-4">
                    {% if item.type == 'radio' %}
                        {% for option in item.option_list %}
                            {% with no=item.no|pprint|add:'&' loop=forloop.counter|pprint %}
                                <div class="form-check">
                                    <input class="form-check-input" type="radio"
                                           id="{{ 'id:'|add:no|add:'index:'|add:loop }}" name="{{ 'id:'|add:no }}"
                                           value="{{ 'id:'|add:no|add:'index:'|add:loop }}"
                                           {% if item.must != '' %}required{% endif %}>
                                    <label class="form-check-label"
                                           for="{{ 'id:'|add:no|add:'index:'|add:loop }}">{{ option }}</label>
                                </div>
                            {% endwith %}
                        {% endfor %}
                    {% elif item.type == 'check' %}
                        {% for option in item.option_list %}
                            {% with no=item.no|pprint|add:'&' loop=forloop.counter|pprint %}
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox"
                                           id="{{ 'id:'|add:no|add:'index:'|add:loop }}"
                                           name="{{ 'id:'|add:no }}"
                                           value="{{ 'id:'|add:no|add:'index:'|add:loop }}">
                                    <label class="form-check-label"
                                           for="{{ 'id:'|add:no|add:'index:'|add:loop }}">{{ option }}</label>
                                </div>
                            {% endwith %}
                        {% endfor %}
                    {% elif item.type == 'input' %}
                        {% with no=item.no|pprint|add:'&' %}
                            <textarea maxlength="500" class="form-control" name="{{ 'id:'|add:no }}"
                                      {% if item.must != '' %}required{% endif %}></textarea>
                        {% endwith %}
                    {% else %}
                        <h3>不支持的组件样式：</h3>
                        <h3><strong>{{ item.type }}</strong></h3>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
        <button type="button" id="commit" class="btn form-control btn-primary mt-5 mb-5  me-4">提交</button>
    </form>
</div>
</body>
</html>